<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/fixclear.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">

</head>
<style>

</style>

<body>
    <!-- 搜索栏 -->
    <div class="header">
        <div class="logo"><img src="./img/首页/LOGO@2x.png" alt=""></div>
        <div class="search"><input type="text" value="" placeholder="请输入商品名称"><i class="iconfont icon-fangdajing"></i>
        </div>
        <div class="city">
            <select name="" id="">
                <option value="">深圳市</option>
                <option value="" selected>广州市</option>
                <option value="">佛山市</option>
                <option value="">湛江市</option>
            </select>
            <i class="iconfont icon-xiajiantou"></i>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="rollPic">
        <img src="./img/首页/首页轮播图.png" alt="">
        <img src="./img/首页/首页轮播图.png" alt="">
        <img src="./img/首页/首页轮播图.png" alt="">
    </div>
    <!-- 横幅栏优惠团购 -->
    <div class="banner">
        <div class="bannerLef"><i class="iconfont icon-pintuantuangouchenggong"></i>
            <h3>团购优惠</h3>
        </div>
        <div class="bannerRig">更多<i class="iconfont icon-jiantou"></i></div>
    </div>
    <!-- 内容上 -->
    <div class="bannerPic">
        <div><img src="./img/首页/唱到嗨.png" alt=""></div>
        <div><img src="./img/首页/领红包.png" alt=""></div>
        <div><img src="./img/首页/抽20元.png" alt=""></div>
        <div><img src="./img/首页/减20元.png" alt=""></div>
    </div>
    <!-- 横幅栏猜你喜欢 -->
    <div class="banner">
        <div class="bannerLef"><i class="iconfont icon-pintuantuangouchenggong"></i>
            <h3>猜你喜欢</h3>
        </div>
        <div class="bannerRig">更多<i class="iconfont icon-jiantou"></i></div>
    </div>
    <!-- 内容中 -->
    <a href="./product..html">
        <div class="item">
            <div class="itemLef"><img src="./img/首页/万岁寿司.png" alt=""></div>
            <div class="itemMid">
                <h2>万岁寿司(正佳店)</h2>[100店通用]&#160;双人套餐<h3>￥88.00</h3>
            </div>
            <div class="itemRig">&#62;100m <br><br>已售1000</div>
        </div>
    </a>
    <div class="item">
        <div class="itemLef"><img src="./img/首页/周黑鸭.png" alt=""></div>
        <div class="itemMid">
            <h2>周黑鸭(正佳店)</h2>[100店通用]&#160;双人套餐<h3>￥88.00</h3>
        </div>
        <div class="itemRig">&#62;100m <br><br>已售1000</div>
    </div>
    <!-- 底部空白栏 -->
    <div class="blank" style="    padding-bottom: 16vw;"></div>
    <!-- foot -->
    <div class="footer">
        <div class="footCon">
            <a href="./index.html"><i class="iconfont icon-31shouyexuanzhong"> </i>
                <p>首页</p>
            </a>
        </div>
        <div class="footCon">
            <a href="./classify.html"><i class="iconfont icon-fenleiorguangchangorqita"> </i>
                <p>分类</p>
            </a>
        </div>
        <div class="footCon">
            <a href="./discover.html"><i class="iconfont icon-faxian"> </i>
                <p>发现</p>
            </a>
        </div>
        <div class="footCon">
            <a href="./mine.html"><i class="iconfont icon-wode1"> </i>
                <p>我的</p>
            </a>
        </div>
    </div>
</body>

</html>

<!-- 
    1. after里面如何插入图标--
    2. 分类页面中 第四个图片偏移--不解决
    3. 各个页面back 回首页--完成
    4. 轮播图
    5. 各个图片非拉伸 而是按比例显示部分--不解决
    6. 各个页面back 位置不对 左移--已解决
    7. 中间的标题位置--已解决
-->